<UserControl x:Class="UColor.Modules.Gallery.ZoomScroll"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:UColor.Modules.Gallery">
    <UserControl.Resources>
        <ResourceDictionary Source="/UCOLOR.App;component/Themes/GalleryPhotoViewer/ZoomScroll.xaml" />
    </UserControl.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid UseLayoutRounding="True">
            <Button Width="15" Height="15" Style="{StaticResource zoomButton}" HorizontalAlignment="Left" VerticalAlignment="Center" Click="OnZoomDecreaseClick">
                <Image Stretch="None" Source="/UCOLOR.App;component/Images/GalleryPhotoViewer/Zoom_Out.png">
                    <RenderOptions.BitmapScalingMode>NearestNeighbor</RenderOptions.BitmapScalingMode>
                </Image>
            </Button>
            <Button Width="15" Height="15" Style="{StaticResource zoomButton}" HorizontalAlignment="Right" VerticalAlignment="Center" Click="OnZoomIncreaseClick">
                <Image Stretch="None" Source="/UCOLOR.App;component/Images/GalleryPhotoViewer/Zoom_In.png">
                    <RenderOptions.BitmapScalingMode>NearestNeighbor</RenderOptions.BitmapScalingMode>
                </Image>
            </Button>
        </Grid>
        <Border x:Name="RootElement" Grid.Row="1" CornerRadius="3" Width="100" Padding="0" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Border.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#00CACCDA" />
                    <GradientStop Color="#19CACCDA" Offset="1" />
                </LinearGradientBrush>
            </Border.Background>
            <Border Background="#FF222431" CornerRadius="2" Margin="1" HorizontalAlignment="Center" VerticalAlignment="Center">
                <!--<Border.Effect>
                    <DropShadowEffect Direction="-90" BlurRadius="10" Opacity="0.35"/>
                </Border.Effect>-->
                <Border HorizontalAlignment="Center" Margin="1" VerticalAlignment="Center" CornerRadius="1">
                    <Border.Background>
                        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                            <GradientStop Color="#FF20202F" Offset="0" />
                            <GradientStop Color="#FF20202F" Offset="1" />
                            <GradientStop Color="#FF545463" Offset="0.59" />
                            <GradientStop Color="#FFA8A8BB" Offset="0.23" />
                            <GradientStop Color="#FF6F6F7E" Offset="0.72" />
                        </LinearGradientBrush>
                    </Border.Background>
                    <Border HorizontalAlignment="Center" VerticalAlignment="Center" CornerRadius="1">
                        <Border.Background>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#BF151623" Offset="1" />
                                <GradientStop Color="#7FF7F7F7" />
                            </LinearGradientBrush>
                        </Border.Background>
                        <Border Margin="0,1" UseLayoutRounding="True" HorizontalAlignment="Center" VerticalAlignment="Center">
                            <Border.Background>
                                <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                                    <GradientStop Color="#FF20202F" Offset="0" />
                                    <GradientStop Color="#FF20202F" Offset="1" />
                                    <GradientStop Color="#FF545463" Offset="0.59" />
                                    <GradientStop Color="#FFA8A8BB" Offset="0.23" />
                                    <GradientStop Color="#FF6F6F7E" Offset="0.72" />
                                </LinearGradientBrush>
                            </Border.Background>

                            <local:ZoomStackPanel x:Name="ZoomPanel" Width="100" HorizontalAlignment="Center" VerticalAlignment="Center" UseLayoutRounding="False" Margin="0,-1" Height="10" Opacity="0.5">
                                <Border Opacity="0.33" BorderBrush="#7FFFFFFF" BorderThickness="0,0,1,0" Background="#FF262838" Width="2" />
                                <Border Opacity="0.36" BorderBrush="#7FFFFFFF" BorderThickness="0,0,1,0" Background="#FF262838" Width="2" />
                                <Border Opacity="0.39" BorderBrush="#7FFFFFFF" BorderThickness="0,0,1,0" Background="#FF262838" Width="2" />
                                <Border Opacity="0.43" BorderBrush="#7FFFFFFF" BorderThickness="0,0,1,0" Background="#FF262838" Width="2" />
                                <Border Opacity="0.46" BorderBrush="#7FFFFFFF" BorderThickness="0,0,1,0" Background="#FF262838" Width="2" />
                                <Border Opacity="0.50" BorderBrush="#7FFFFFFF" BorderThickness="0,0,1,0" Background="#FF262838" Width="2" />
                                <Border Opacity="0.53" BorderBrush="#7FFFFFFF" BorderThickness="0,0,1,0" Background="#FF262838" Width="2" />
                                <Border Opacity="0.56" BorderBrush="#7FFFFFFF" BorderThickness="0,0,1,0" Background="#FF262838" Width="2" />
                                <Border Opacity="0.59" BorderBrush="#7FFFFFFF" BorderThickness="0,0,1,0" Background="#FF262838" Width="2" />
                                <Border Opacity="0.62" BorderBrush="#7FFFFFFF" BorderThickness="0,0,1,0" Background="#FF262838" Width="2" />
                                <Border Opacity="0.65" BorderBrush="#7FFFFFFF" BorderThickness="0,0,1,0" Background="#FF262838" Width="2" />
                                <Border Opacity="0.68" BorderBrush="#7FFFFFFF" BorderThickness="0,0,1,0" Background="#FF262838" Width="2" />
                                <Border Opacity="0.71" BorderBrush="#7FFFFFFF" BorderThickness="0,0,1,0" Background="#FF262838" Width="2" />

                                <Border Opacity="0.75" BorderBrush="#7FFFFFFF" BorderThickness="0,0,1,0" Background="#FF262838" Width="2" />
                                <Border Opacity="0.75" BorderBrush="#7FFFFFFF" BorderThickness="0,0,1,0" Background="#FF262838" Width="2" />

                                <Border Opacity="0.71" BorderBrush="#7FFFFFFF" BorderThickness="0,0,1,0" Background="#FF262838" Width="2" />
                                <Border Opacity="0.68" BorderBrush="#7FFFFFFF" BorderThickness="0,0,1,0" Background="#FF262838" Width="2" />
                                <Border Opacity="0.65" BorderBrush="#7FFFFFFF" BorderThickness="0,0,1,0" Background="#FF262838" Width="2" />
                                <Border Opacity="0.62" BorderBrush="#7FFFFFFF" BorderThickness="0,0,1,0" Background="#FF262838" Width="2" />
                                <Border Opacity="0.59" BorderBrush="#7FFFFFFF" BorderThickness="0,0,1,0" Background="#FF262838" Width="2" />
                                <Border Opacity="0.56" BorderBrush="#7FFFFFFF" BorderThickness="0,0,1,0" Background="#FF262838" Width="2" />
                                <Border Opacity="0.53" BorderBrush="#7FFFFFFF" BorderThickness="0,0,1,0" Background="#FF262838" Width="2" />
                                <Border Opacity="0.50" BorderBrush="#7FFFFFFF" BorderThickness="0,0,1,0" Background="#FF262838" Width="2" />
                                <Border Opacity="0.46" BorderBrush="#7FFFFFFF" BorderThickness="0,0,1,0" Background="#FF262838" Width="2" />
                                <Border Opacity="0.43" BorderBrush="#7FFFFFFF" BorderThickness="0,0,1,0" Background="#FF262838" Width="2" />
                                <Border Opacity="0.39" BorderBrush="#7FFFFFFF" BorderThickness="0,0,1,0" Background="#FF262838" Width="2" />
                                <Border Opacity="0.36" BorderBrush="#7FFFFFFF" BorderThickness="0,0,1,0" Background="#FF262838" Width="2" />
                                <Border Opacity="0.33" BorderBrush="#7FFFFFFF" BorderThickness="0,0,1,0" Background="#FF262838" Width="2" />
                            </local:ZoomStackPanel>
                        </Border>
                    </Border>
                </Border>
            </Border>
        </Border>
    </Grid>
</UserControl>
